<template lang="html">
  <div>
    <div class="box">
      <canvas id="circle" class="circle" ref="circle" width="200" height="200"></canvas>
      <br>
      <input type="text" v-model="num" @input="rate">
    </div>
  </div>
</template>

<script>
const MAX = 100
const NAME = 'DEFORE'
export default {
  data() {
    return {
      num: 20
    }
  },
  methods: {
    rate() {
      if (typeof parseInt(this.num) !== 'number') return;

      let canvas = this.$refs.circle
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d')
        let width = ctx.canvas.width
        let height = ctx.canvas.height
        ctx.clearRect(0, 0, width, height);

        ctx.save()
        ctx.beginPath()
        ctx.moveTo(175, 100)
        ctx.lineWidth = 10
        ctx.lineCap = 'round'
        // #A5E9DB -> #2CA4BF
        let grd = ctx.createLinearGradient(0, 0, 100, 100)
        grd.addColorStop(0, '#A5E9DB')
        grd.addColorStop(1, '#2CA4BF')
        ctx.strokeStyle = grd
        ctx.arc(100, 100, 75, 0, parseFloat(this.num / MAX, 2) * 2 * Math.PI)
        ctx.stroke()
        ctx.restore()
      }
    }
  },
  mounted() {
    this.rate()
  }
}
</script>

<style lang="scss">
.box {
    margin-top: 200px;
    text-align: center;
}
.circle {
    border: 1px solid #ccc;
}
</style>
